<template>
    <div>

   <div v-if="loginStatus==0">
    <van-row style="margin-top: 20px;"  justify="space-around"
    align="center" >
  <van-col span="4">
   <van-image
  round
  width="4rem"
  height="4rem"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
  </van-col>
  <van-col span="12"><p class="userTitle">点击
    <router-link class="link" to="/login">登录</router-link>/
    <router-link class="link" to="/reg">注册</router-link></p>
<p class="userContent">登录之后享受更多信息</p>
</van-col>
  <van-col span="4" ><van-icon name="enlarge" size="20px"/><van-icon name="arrow" size="20px"/></van-col>
</van-row>
   </div> 
   <div v-if="loginStatus==1">
  <van-row style="margin-top: 20px;"  justify="space-around"
    align="center" >
  <van-col span="4">
   <van-image
  round
  width="4rem"
  height="4rem"
  :src="admin.avatar"
/>
  </van-col>
  <van-col span="12"><p class="userTitle">
    <router-link class="link" to="">欢迎：{{admin.username}}</router-link>
    </p>
<p class="userContent"><router-link to="" class="link userContent">查看并编辑个人信息</router-link><br>
    <router-link v-if="admin.name=='管理员'" class="link" to="/admin">后台管理</router-link>
</p>
</van-col>
  <van-col span="4" ><van-icon name="enlarge" size="20px"/><van-icon name="arrow" size="20px"/></van-col>
</van-row>
   </div>
  
  <h3>我的资产</h3>
  <!-- vant官网 cell单元格  用于实现 列表页 -->
  <van-cell-group >
    <img width="380"  src=""/>
  <van-cell title="用户反馈" isLink />
  <van-cell title="设置" isLink />
</van-cell-group>
  <h4 v-if="loginStatus==1"  @click="loginout">退出登录</h4>
  <button @click="testTopic">测试</button>
    </div>
   
   
</template>
<script setup>
import {ref} from "vue"
import api from "@/api"

const testTopic=()=>{
  api.postReq("/topics/selectAllTopic").then(res=>{
    console.log(res.data)
  })
}
// const loginStatus = authStore.loginStatus // 读取登录状态
const loginStatus = ref(0)

//获取登录的信息
//JSON.stringify 将json对象转换成String
//JSON.parse  将String转换成json对象
const admin= JSON.parse(localStorage.getItem("admin"))
if(admin!=null){
  loginStatus.value=1
}
const loginout=()=>{
  //  authStore.setLoginStatus(0)
  localStorage.removeItem("admin")
  localStorage.removeItem("mytoken")
  loginStatus.value=0
}
</script>
<style scoped>
.van-grid-item{
  /* 如果设置样式失效 可能vant下面提供自定义样式 */
/* background-color:  */
  --van-grid-item-content-background: white;
}

.userTitle{
    font-size: 25px;
    margin: 0px;
}
.link{
    color:black;
}
.userContent{
    margin: 3px;
    font-size: 15px;
    color: #646566;
}
h3{
  font-weight: 500;
  padding-left: 30px;
}
h4{
  text-align: center;
  font-size: 20px;
}
</style>